<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人体姿势识别 - 实时监控</title>
    <link rel="icon" href="/static/favicon.ico">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }

        .container {
            max-width: 1800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 700px;
            gap: 20px;
            height: calc(100vh - 150px);
        }

        .canvas-container {
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .canvas-container h2 {
            margin-bottom: 15px;
            text-align: center;
        }

        #poseCanvas {
            width: 100%;
            height: calc(100% - 50px);
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            border: 2px solid rgba(255,255,255,0.3);
        }

        .side-panels {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .status-panel, .control-panel {
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            overflow-y: auto;
        }

        .status-panel h2, .control-panel h2 {
            margin-bottom: 20px;
            text-align: center;
        }

        .analysis-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .analysis-grid .analysis-item {
            margin-bottom: 8px;
        }

        .analysis-grid .analysis-label {
            font-size: 12px;
            margin-bottom: 3px;
        }

        .analysis-grid .analysis-value {
            font-size: 13px;
            padding: 8px;
        }

        .status {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .status-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .status-label {
            font-weight: bold;
        }

        .status-value {
            color: #4ade80;
        }

        .status-value.error {
            color: #f87171;
        }

        .status-value.warning {
            color: #fbbf24;
        }

        .analysis-section {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .analysis-section h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .analysis-item {
            margin-bottom: 10px;
        }

        .analysis-label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .analysis-value {
            background: rgba(255,255,255,0.1);
            padding: 8px;
            border-radius: 5px;
            text-align: center;
        }

        .score-display {
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            margin: 20px 0;
            padding: 20px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
        }

        .controls {
            display: grid;
            gap: 10px;
            margin-bottom: 20px;
        }

        .controls h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .file-input {
            display: none;
        }

        .file-label {
            display: block;
            padding: 12px 20px;
            background: linear-gradient(45deg, #4ade80, #22c55e);
            color: white;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .file-label:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .display-controls {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .display-controls h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .control-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .control-label {
            margin-left: 10px;
            font-weight: bold;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.3);
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #4ade80;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .calibration-info {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .calibration-info h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .calibration-info p {
            margin-bottom: 8px;
            font-size: 12px;
            line-height: 1.4;
        }

        .process-status {
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .process-status h3 {
            margin-bottom: 15px;
            text-align: center;
        }

        .status-step {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 5px;
            background: rgba(255,255,255,0.1);
        }

        .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
            margin-right: 10px;
        }

        .step-text {
            flex: 1;
            font-weight: bold;
        }

        .step-status {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.2);
        }

        .status-step.completed .step-number {
            background: #4ade80;
        }

        .status-step.completed .step-status {
            background: #4ade80;
            color: white;
        }

        .status-step.active .step-number {
            background: #fbbf24;
        }

        .status-step.active .step-status {
            background: #fbbf24;
            color: white;
        }

        .connection-status {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            border-radius: 25px;
            font-weight: bold;
            z-index: 1000;
        }

        .connected {
            background: #4ade80;
            color: white;
        }

        .disconnected {
            background: #f87171;
            color: white;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="connection-status" id="connectionStatus">
        <span id="statusText">连接中...</span>
    </div>

    <!-- 新增：人员ID和任务ID输入框 -->
    <div style="margin: 20px 0 10px 0; text-align: center;">
        <label style="margin-right: 20px;">人员ID: <input id="personIdInput" value="testuser" style="width:120px; padding:5px; border-radius:5px; border:none;"></label>
        <label style="margin-right: 20px;">任务ID: <input id="taskIdInput" value="testtask" style="width:120px; padding:5px; border-radius:5px; border:none;"></label>
        <button id="connectBtn" class="btn" style="padding:8px 18px;">连接</button>
    </div>

    <div class="container">
        <div class="header">
            <h1>🤖 人体姿势分析</h1>
        </div>

        <div class="main-content">
            <div class="canvas-container">
                <h2>📊 实时骨骼图</h2>
                <canvas id="poseCanvas"></canvas>
            </div>

            <div class="side-panels">
                <!-- 状态显示面板 -->
                <div class="status-panel">
                    <h2>📊 状态显示</h2>
                    
                    <div class="status">
                        <h3>📡 连接状态</h3>
                        <div class="status-item">
                            <span class="status-label">WebSocket:</span>
                            <span class="status-value" id="wsStatus">连接中...</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">帧数:</span>
                            <span class="status-value" id="frameCount">0</span>
                        </div>
                        <div class="status-item">
                            <span class="status-label">校准状态:</span>
                            <span class="status-value" id="calibrationStatus">未校准</span>
                        </div>
                    </div>

                    <div class="score-display" style="display: none;">
                        <div>总体评分</div>
                        <div id="overallScore">--</div>
                    </div>

                    <div class="analysis-section">
                        <h3>📈 姿势分析</h3>
                        <div class="analysis-grid">
                            <!-- 头部姿态检测 -->
                            <div class="analysis-item">
                                <div class="analysis-label">头部左转</div>
                                <div class="analysis-value" id="headTurnLeft">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部右转</div>
                                <div class="analysis-value" id="headTurnRight">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部左歪</div>
                                <div class="analysis-value" id="headTiltLeft">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部右歪</div>
                                <div class="analysis-value" id="headTiltRight">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部前倾</div>
                                <div class="analysis-value" id="headTiltForward">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部后仰</div>
                                <div class="analysis-value" id="headTiltBackward">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">头部上扬</div>
                                <div class="analysis-value" id="headUpward">--</div>
                            </div>
                            
                            <!-- 肩部姿态检测 -->
                            <div class="analysis-item">
                                <div class="analysis-label">两肩水平</div>
                                <div class="analysis-value" id="shoulderLevel">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">两肩后张</div>
                                <div class="analysis-value" id="shoulderRetraction">--</div>
                            </div>
                            
                            <!-- 身体姿态检测 -->
                            <div class="analysis-item">
                                <div class="analysis-label">身体左转</div>
                                <div class="analysis-value" id="bodyTurnLeft">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">身体右转</div>
                                <div class="analysis-value" id="bodyTurnRight">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">身体左歪</div>
                                <div class="analysis-value" id="bodyTiltLeft">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">身体右歪</div>
                                <div class="analysis-value" id="bodyTiltRight">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">身体前倾</div>
                                <div class="analysis-value" id="bodyLeanForward">--</div>
                            </div>
                            <div class="analysis-item">
                                <div class="analysis-label">身体后仰</div>
                                <div class="analysis-value" id="bodyLeanBackward">--</div>
                            </div>
                            
                            <!-- 腿部姿态检测 -->
                            <div class="analysis-item">
                                <div class="analysis-label">腿部笔直</div>
                                <div class="analysis-value" id="legsStraight">--</div>
                            </div>
                            
                            <!-- 置信度 -->
                            <div class="analysis-item">
                                <div class="analysis-label">置信度</div>
                                <div class="analysis-value" id="confidence">--</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 控制面板 -->
                <div class="control-panel">
                    <h2>🎛️ 控制面板</h2>
                    
                    <div class="controls">
                        <h3>🎮 操作控制</h3>
                        <button class="btn" id="loadDataBtn">📁 导入测试数据</button>
                        <button class="btn" id="calibrateBtn" disabled>🎯 开始校准</button>
                        <button class="btn" id="examBtn" disabled>📝 开始考试</button>
                        <button class="btn" id="clearBtn">🗑️ 清除数据</button>
                        <button class="btn" id="exportBtn">💾 导出结果</button>
                    </div>

                    <div class="display-controls">
                        <h3>🎨 显示控制</h3>
                        <div class="control-item">
                            <label class="switch">
                                <input type="checkbox" id="showReferenceSkeleton" checked>
                                <span class="slider"></span>
                            </label>
                            <span class="control-label">显示参考骨骼</span>
                        </div>
                        <div class="control-item">
                            <label class="switch">
                                <input type="checkbox" id="showCurrentSkeleton" checked>
                                <span class="slider"></span>
                            </label>
                            <span class="control-label">显示当前骨骼</span>
                        </div>
                        <div class="control-item">
                            <label class="switch">
                                <input type="checkbox" id="showReferenceLines" checked>
                                <span class="slider"></span>
                            </label>
                            <span class="control-label">显示参考线</span>
                        </div>
                        <div class="control-item">
                            <label class="switch">
                                <input type="checkbox" id="showSmoothedSkeleton" checked>
                                <span class="slider"></span>
                            </label>
                            <span class="control-label">显示去抖动骨骼</span>
                        </div>
                    </div>

                    <div class="playback-controls">
                        <h3>⏯️ 播放控制</h3>
                        <div class="control-item">
                            <label class="control-label">播放延时:</label>
                            <input type="number" id="playbackDelay" value="500" min="100" max="3000" step="100" style="width: 80px; padding: 5px; border-radius: 5px; border: none; background: rgba(255,255,255,0.2); color: white;">
                        </div>
                        <div class="control-item">
                            <button class="btn" id="pauseBtn" style="display: none;">⏸️ 暂停</button>
                            <button class="btn" id="resumeBtn" style="display: none;">▶️ 继续</button>
                        </div>
                        <div class="control-item">
                            <span class="control-label">当前帧:</span>
                            <span class="status-value" id="currentFrame">--</span>
                            <span class="control-label">总帧数:</span>
                            <span class="status-value" id="totalFrames">--</span>
                        </div>
                    </div>

                    <div class="filter-controls">
                        <h3>🔧 抖动过滤</h3>
                        <div class="control-item">
                            <label class="control-label">平滑因子:</label>
                            <input type="range" id="smoothingFactor" min="0" max="1" step="0.1" value="0.7" style="width: 100px;">
                            <span class="status-value" id="smoothingFactorValue">0.7</span>
                        </div>
                        <div class="control-item">
                            <label class="control-label">历史帧数:</label>
                            <input type="number" id="historySize" value="5" min="3" max="10" step="1" style="width: 60px; padding: 5px; border-radius: 5px; border: none; background: rgba(255,255,255,0.2); color: white;">
                        </div>
                        <div class="control-item">
                            <button class="btn" id="clearHistoryBtn">🗑️ 清除历史</button>
                        </div>
                    </div>

                    <div class="process-status">
                        <h3>📊 处理状态</h3>
                        <div class="status-step" id="step1">
                            <span class="step-number">1</span>
                            <span class="step-text">导入测试数据</span>
                            <span class="step-status">等待</span>
                        </div>
                        <div class="status-step" id="step2">
                            <span class="step-number">2</span>
                            <span class="step-text">校准前20帧</span>
                            <span class="step-status">等待</span>
                        </div>
                        <div class="status-step" id="step3">
                            <span class="step-number">3</span>
                            <span class="step-text">考试评分</span>
                            <span class="step-status">等待</span>
                        </div>
                    </div>

                    <div class="calibration-info">
                        <h3>📋 处理说明</h3>
                        <p><strong>步骤1：</strong>导入包含164帧的测试数据</p>
                        <p><strong>步骤2：</strong>使用前20帧建立个人化参考标准</p>
                        <p><strong>步骤3：</strong>对后144帧进行考试评分</p>
                        <p><strong>蓝色虚线：</strong>参考骨骼（前20帧平均值）</p>
                        <p><strong>绿色实线：</strong>当前考试骨骼</p>
                    </div>

                    <input type="file" id="fileInput" class="file-input" accept=".json">

                    <div class="loading" id="loading">
                        <div class="spinner"></div>
                        <div>处理中...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/script.js?v=1.1"></script>
</body>
</html> 